<div class="row">
    <div class="col-xs-12">
        <!-- PAGE CONTENT BEGINS -->
        <form class="form-horizontal" method="post" role="form">
            <!-- #section:elements.form -->
            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1">功能名称: </label>

                <div class="col-sm-9">
                    <input name="vars[name]" class="col-xs-8 col-sm-4" type="text" value="{{.row.Name}}" required>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1-1">隶属: </label>

                <div class="col-sm-9">
                    <select class="col-sm-3 select"  name="vars[pid]" id="select_option_owner">
                        <option value="0">根节点</option>
                        {{range $k,$v := .listRow}}
                            <option data="{{.Controller}}" value="{{.Id}}" {{if eq $.row.Pid .Id}}selected{{end}}>{{$v.Name}}</option>
                        {{end}}
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> controller: </label>

                <div class="col-sm-9">
                    <input id="form-group-controller-i" name="vars[controller]" class="col-xs-8 col-sm-4" type="text" value="{{.row.Controller}}"> 
                    <span class="help-inline col-xs-12 col-sm-7">
                        <span class="middle" id="form-group-controller-h">子菜单默认选项</span>
                    </span>
                </div>
            </div>

            <div class="form-group" id="form-group-action">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> action: </label>

                <div class="col-sm-9">
                    <input name="vars[action]" class="col-xs-8 col-sm-4" type="text" value="{{.row.Action}}">

                    <span class="help-inline col-xs-12 col-sm-7">
                        <span class="middle">方法</span>
                    </span>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 排序: </label>

                <div class="col-sm-9">
                    <input name="vars[sort]" class="col-xs-8 col-sm-4" type="text" value="{{.row.Sort}}" required>
                </div>
            </div>

            <!-- /section:elements.form -->
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-2"> 
                    是否菜单: 
                </label>

                <div class="col-sm-9">
                    <label class="inline">
                        <input id="id-button-borders" name="vars[is_menu]" is_menu="{{$.row.IsMenu}}_" class="ace ace-switch ace-switch-5" type="checkbox">
                        <span class="lbl middle"></span>
                    </label>
                </div>
            </div>

            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-input-readonly"> 
                    功能描述: 
                </label>

                <div class="col-sm-9">
                    <textarea class="col-sm-5" name="vars[desc]">{{.row.Desc}}</textarea>
                </div>
            </div>

            <div class="space-4"></div>

            <div id="form-group-icon" class="form-group">
                <label class="col-sm-3 control-label no-padding-right" for="form-field-4">菜单图标</label>

                <div class="col-sm-9">
                    <label class="control-label" for="form-field-4">
                    <i id="selected_icon" class="icon-only ace-icon bigger-150 {{.row.Icon}}"></i>
                    </label>

                    <input id="hidden_icon" name="vars[icon]" placeholder=".input-sm" value="{{.row.Icon}}" type="hidden">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label no-padding-right" for="form-input-readonly"></label>

                <div class="col-sm-8">
                    <div id="widget-body-icon" class="widget-box">
                        <div class="widget-header">
                            <h4 class="smaller">请选择菜单图标</h4>
                        </div>

                        <div  class="widget-body">
                            <div class="widget-main" id="id_icon_show">
                            <!-- <div class="bs-glyphicons"> -->
                            <!-- #section:elements.popover -->
                            <ul class="bs-glyphicons-list" style="cursor:pointer;"></ul>
                            <!-- /section:elements.popover -->
                            <!-- </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <button class="btn btn-info" type="submit">
                        <i class="ace-icon fa fa-check bigger-110"></i>提交
                    </button>
                    &nbsp; &nbsp; &nbsp;
                    <button class="btn" type="reset">
                        <i class="ace-icon fa fa-undo bigger-110"></i>重置
                    </button>
                </div>
            </div>

        </form>
    </div><!-- /.col -->
</div>
<script>


jQuery(function($) {
//start

//添加图片
var icon_fa = 'fa-adjust,fa-asterisk,fa-ban,fa-bar-chart-o,fa-barcode,fa-flask,fa-beer,fa-bell-o,fa-bell,fa-bolt,fa-book,fa-bookmark,fa-bookmark-o,fa-briefcase,fa-bullhorn,fa-calendar,fa-camera,fa-camera-retro,fa-certificate,fa-check-square-o,fa-square-o,fa-circle,fa-circle-o,fa-cloud,fa-cloud-download,fa-cloud-upload,fa-coffee,fa-cog,fa-cogs,fa-comment,fa-comment-o,fa-comments,fa-comments-o,fa-credit-card,fa-tachometer,fa-desktop,fa-arrow-circle-o-down,fa-download,fa-pencil-square-o,fa-envelope,fa-envelope-o,fa-exchange,fa-exclamation-circle,fa-external-link,fa-eye-slash,fa-eye,fa-video-camera,fa-fighter-jet,fa-film,fa-filter,fa-fire,fa-flag,fa-folder,fa-folder-open,fa-folder-o,fa-folder-open-o,fa-cutlery,fa-gift,fa-glass,fa-globe,fa-users,fa-hdd-o,fa-headphones,fa-heart,fa-heart-o,fa-home,fa-inbox,fa-info-circle,fa-key,fa-leaf,fa-laptop,fa-gavel,fa-lemon-o,fa-lightbulb-o,fa-lock,fa-unlock';

var icon_fa_list = icon_fa.split(",");
for (var i = 0; i < icon_fa_list.length; i++) {
    var t = '<i style="width: 25px;height: 25px;" data="fa '+icon_fa_list[i]+'" class="icon-only ace-icon fa '+icon_fa_list[i]+'"></i>'
    $("#id_icon_show ul").append(t);
}
var icon_glyphicon = 'glyphicon-asterisk,glyphicon-plus,glyphicon-euro,glyphicon-minus,glyphicon-cloud,glyphicon-envelope,glyphicon-pencil,glyphicon-glass,glyphicon-music,glyphicon-search,glyphicon-heart,glyphicon-star,glyphicon-star-empty,glyphicon-user,glyphicon-film,glyphicon-th-large,glyphicon-th,glyphicon-th-list,glyphicon-ok,glyphicon-remove,glyphicon-zoom-in,glyphicon-zoom-out,glyphicon-off,glyphicon-signal,glyphicon-cog,glyphicon-trash,glyphicon-home,glyphicon-file,glyphicon-time,glyphicon-road,glyphicon-download-alt,glyphicon-download,glyphicon-upload,glyphicon-inbox,glyphicon-play-circle,glyphicon-repeat,glyphicon-refresh,glyphicon-list-alt,glyphicon-lock,glyphicon-flag,glyphicon-headphones,glyphicon-volume-off,glyphicon-volume-down,glyphicon-volume-up,glyphicon-qrcode,glyphicon-barcode,glyphicon-tag,glyphicon-tags,glyphicon-book,glyphicon-bookmark,glyphicon-print,glyphicon-camera,glyphicon-font,glyphicon-bold,glyphicon-italic,glyphicon-text-height,glyphicon-text-width,glyphicon-align-left,glyphicon-align-center,glyphicon-align-right,glyphicon-align-justify,glyphicon-list,glyphicon-indent-left,glyphicon-indent-right,glyphicon-facetime-video,glyphicon-picture,glyphicon-map-marker,glyphicon-adjust,glyphicon-tint,glyphicon-edit,glyphicon-share,glyphicon-check,glyphicon-move,glyphicon-step-backward,glyphicon-fast-backward,glyphicon-backward';

var icon_glyphicon_list = icon_glyphicon.split(",");
for (var i = 0; i < icon_glyphicon_list.length; i++) {
    var t = '<i style="width: 25px;height: 25px;" data="glyphicon '+icon_glyphicon_list[i]+'" class="icon-only ace-icon glyphicon '+icon_glyphicon_list[i]+'"></i>'
    $("#id_icon_show ul").append(t);
}

//图标选择
$('.bs-glyphicons-list').children().each(function(){
    $(this).mousemove(function(){
        $(this).css('color', '#8ab2c9');
    }).mouseout(function(){
        $(this).css('color', '');
    });

    $(this).on('click', function(){
        var data = $(this).attr('data');
        $('#selected_icon').attr('class','icon-only ace-icon bigger-150 ' + data);
        $('#hidden_icon').val(data);
    });
});


//属于选择
function select_option_owner(){
    var select_v = $('#select_option_owner').val();
    if(select_v == 0){
        $('#form-group-action').addClass('hide');
        $('#form-group-controller-h').text('子菜单默认选项');
    } else {
        $('#form-group-action').removeClass('hide');
        $('#form-group-controller-h').text('控制器名称');
    }

    var data = $('#select_option_owner :selected').attr('data');
    if (data){
        $('#form-group-controller-i').val(data);
    }
}
$('#select_option_owner').children().each(function(index, el) {
    //console.log(this);
    $(this).click(function(event) {
        console.log($(this).attr('data'));
    });        
});

select_option_owner();
$('#select_option_owner').on('change', function(){
    select_option_owner()
});

//菜单选项
var is_menu = $('#id-button-borders').attr('is_menu');
// console.log(is_menu);
if(is_menu == '0_'){
    $('#widget-body-icon').toggleClass('hide');
    $('#form-group-icon').toggleClass('hide');
} else {
    $('#id-button-borders').attr('checked','checked');
}

$('#id-button-borders').on('click', function(){
    $('#widget-body-icon').toggleClass('hide');
    $('#form-group-icon').toggleClass('hide');
});

//end
})
</script>